[license-img]: https://img.shields.io/github/license/HuolalaTech/page-spy-web?label=License
[license-url]: https://github.com/HuolalaTech/page-spy-web/blob/main/LICENSE
[sdk-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-plugin-ospy?label=OSpy&color=white
[sdk-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-plugin-ospy

import Icon from '@ant-design/icons';
import Logo from '@/assets/image/o-spy.svg?react';
import workflow from '@/assets/image/screenshot/ospy-workflow.en.png';
import { Link } from 'react-router-dom';

<div align="center">
  <Icon component={Logo} style={{ fontSize: 100, color: '#fff' }} />
  <h1>O-Spy</h1>
  <h5>オフラインで記録、完全な再生。</h5>
</div>

<div className='badges'>
  [![SDK version][sdk-ver-img]][sdk-ver-url]
  [![license][license-img]][license-url]
</div>

## O-Spyとは？#what-is-ospy

O-Spy（発音 /əʊ spaɪ/、**"Oh-Spy"** のように）は、プログラムの実行データを**オフラインで記録**することに特化した軽量なWebデバッグツールです。サーバーの展開が不要で、すべてのデータはローカルに保存され、完全な再生デバッグをサポートしています。[デモを見る](/o-spy?url=demo)。

コア機能：

- 🚀 **ゼロデプロイ**：サーバーのセットアップ不要、すぐに使用可能
- 📦 **ローカルストレージ**：データはアップロードされず、プライバシーを保護
- 🎬 **完全な再生**：録画を見るように問題のシーンを再現
- 🎨 **カスタマイズ可能**：テーマやボタンスタイルを自由に設定

ワークフロー：

<a href={workflow} target="_blank">
  <img src={workflow} style={{width: '100%'}} />
</a>

## クイックスタート#quick-start

わずか3つのステップでO-Spyの強力な機能を体験できます。

### ステップ1：O-Spyの導入#step-1

O-Spyはフレームワークに依存せず、複数の導入方法をサポートしています。お好みの方法を選択してください：

import { ImportGuide } from '@/pages/OSpy/components/ImportGuide';

<ImportGuide showConfig={false} />

導入に成功すると、ページの右下にドラッグ可能な「O-Spy」ボタンが表示されます。クリックして試してみてください :)

import { CallOSpy } from '../md-components/CallOSPy';

<CallOSpy />

### ステップ2：データの生成とエクスポート#step-2

デモンストレーションのために、このページにはすでにO-Spyが統合されています。実際の使用シナリオをシミュレートして、デバッグデータを生成してみましょう：

import { MakeData } from '../md-components/MakeData'

<MakeData />

上記のボタンをクリックしてデータを生成したら、以下の手順でエクスポートします：

1. 右下のO-Spyフローティングボタンをクリックして、操作パネルを開く
2. **「ログのエクスポート」**ボタンをクリック
3. ブラウザが自動的に `.json` 形式のログファイルをダウンロードします

> 💡 **ヒント**：エクスポートされたJSONファイルには、コンソールログ、ネットワークリクエスト、ページ操作など、ページのすべての実行データが含まれています。

### ステップ3：再生とデバッグ#step-3

それでは、先ほどエクスポートしたデータを再生してみましょう：

1. <Link to="/o-spy?url=" target='_blank'>再生ページ</Link>に移動
2. 左上の**「ログを選択」**ボタンをクリック
3. 先ほどエクスポートしたJSONファイルを選択
4. 再生を開始して、完全な実行プロセスを確認してください！

おめでとうございます！O-Spyの基本的な使い方をマスターしました 🎉 